<template>
    <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
    <van-card
    v-for="item in goodsList"
    :key="item.id"
    :tag="item.tag"
    :price="item.retail_price"
    :origin-price="item.origin_price"
    :desc="item.goods_brief"
    :title="item.name"
    :thumb="item.list_pic_url"
    >
    </van-card>
    </div>
</div>
</template>
<script setup>
const goodsList = [
 {
 retail_price: '399.00',
 name: '八重神子cosplay服装',
 goods_brief: '细节还原角色本貌，喜欢就冲别等错过回家偷听反方向的钟',
 list_pic_url: 'src/assets/images/555.jpg',
 tag: 'TOP1'
 },
 {
 retail_price: '29.9',
 origin_price: '39.9',
 name: '儿童充气小马',
 goods_brief: '安全、可蹦可跳、还送打气筒冲就完了',
 list_pic_url: 'src/assets/images/666.jpg',
 tag: 'TOP2'
 },
 {
 retail_price: '198.00',
 origin_price: '268.00',
 name: '阳台秋千吊床',
 goods_brief: '安全、舒适放松值得你的信赖',
 list_pic_url: 'src/assets/images/777.jpg',
 tag: 'TOP3'
 },
 {
 retail_price: '8099.00',
 origin_price: '9999.00',
 name: '乐高',
 goods_brief: '乐高迷速冲',
 list_pic_url: 'src/assets/images/999.jpg',
 tag: 'TOP4'
 },
 {
 retail_price: '128.00',
 origin_price: '198.00',
 name: '遥控跑车',
 goods_brief: '超帅遥控跑车‘小孩玩可能有点幼稚但男大玩刚刚好',
 list_pic_url: 'src/assets/images/789.jpg',
 tag: 'TOP5'
 } ]
</script>
<style lang="less" scoped>
.home-top {
h3 {
font-size: 22px;
line-height: 30px;
text-align: center;
margin: 0.5rem 0;
}
.content {
--van-tag-primary-color: #FF8000;
--van-card-font-size: 16px;
--van-card-background: #f9f9f9;
background: var(--van-card-background);
:deep(.van-card) {
margin-top: 0;
.van-card__title {
padding: 10px 0 5px;
}
.van-card__price-currency {
font-size: var(--van-card-font-size);
} }
&::after {
content: '';
display: block;
height: 3rem;
} } }
</style>